<template>
  <view class="manageDevice">
    <navBar color="#000" background="#e0dac9" :title="$t('update')"></navBar>
    <view class="item-wrap">
      <view class="item flex_s">
        <view class="item-left">{{$t('home.Automatic-update')}}</view>
        <view class="item-right">
          <switch color="#B09653" :checked="checked" @change="switch1Change" style="transform:scale(0.7)" />
        </view>
      </view>

      <view class="item flex_s">
        <view class="item-left">{{$t('home.current-version')}}</view>
        <view class="item-right">
          <view>{{deviceversion}}</view>
          <!-- <view class="font_size_24 color_9">{{$t('already.new.version')}}</view> -->
        </view>
      </view>

      <view class="item">
        <view class="item-left">
          <view>{{$t('new.version')}} {{info.versionCode||'--'}}</view>
          <view>
            <view class="font_size_28 color_9">{{info.versionName||'--'}}</view>
            <view class="font_size_28 color_9">{{info.versionInfo||'--'}}</view>
          </view>
        </view>
        <view class="item-right">
          <view class="new-btn flex_1" @click="hanleUpdate">{{$t('update.now')}}</view>
        </view>
      </view>
    </view>
    <!-- 报错弹窗 -->
    <popup-error ref="PopupError" @confirm="handleErrorConfirm" :content="content"></popup-error>
  </view>
</template>

<script>
  import PopupError from '@/componets/PopupError.vue';
  import {
    updateInfo,
    updateDeviceName,
    deviceInfo,
    updateBySn
  } from '@/api/device.js'
  export default {
    components: {
      PopupError
    },
    data() {
      return {
        checked: false,
        content: '',
        sn: '',
        isUpdate: '',
        info: "",
        deviceversion: ''
      }
    },
    onLoad(e) {
      if (e.sn) {
        this.sn = e.sn
        this.isUpdate = e.isUpdate
        this.getInfo()
      }

    },
    methods: {
      getInfo() {
        updateInfo(this.isUpdate).then((res) => {
          if (res.code === 0) {
            this.info = res.data
            console.log(this.info, 'llll')
            // this.$forceUpdate();
            this.getDeviceInfo()
          }
        });
      },
      getDeviceInfo() {
        deviceInfo({
          sn: this.sn
        }).then((r) => {
          this.deviceversion = r.data.deviceVersion
          if (r.data.autoUpdate == 0) {
            this.checked = true
          } else {
            this.checked = false
          }
        });
      },

      switch1Change(e) {
        console.log('switch1 发生 change 事件，携带值为', e.detail.value)
        updateDeviceName({
          sn: this.sn,
          autoUpdate: e.detail.value ? 0 : 1
        }).then((r) => {
          if (r.code === 0) {
            this.config.Toast(this.$t('modified.successfully'))
            // this.$forceUpdate();
          }
        });
      },
      hanleUpdate() {
        updateBySn({
          sn: this.sn,
        }).then((r) => {
          if (r.code === 0) {
            this.content = r.data
            this.$refs.PopupError.open()
          }
        });
      },
      handleErrorConfirm() {
        // 这里添加你想要执行的代码

        console.log('知道了');
      },
    }
  }
</script>

<style lang="scss" scoped>
  .manageDevice {
    .item-wrap {
      .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 25rpx 40rpx;
        background: #fff;
        color: #333333;
        font-size: 32rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .item-right {
          text-align: right;

          image {
            width: 13rpx;
            height: 22rpx;
            margin-left: 10rpx;
          }

          .new-btn {
            width: 147rpx;
            height: 55rpx;
            background: #AF9453;
            border-radius: 27rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
          }
        }
      }
    }
  }
</style>